<template>
	<view v-if="show" class="unio2o-login bg-w animated zoomInUp">
		<view class="login-header text-center">
			 <app-icon name="icon_smile" type="iconfont" size="120" color="#fff" background-color="#ff6b35"></app-icon>
			 <view class="mt20 ft14 text-info">
				 Hi～请登录
			 </view>
		</view>
		
		<view v-if="isWeixin == true">
				
				<view class="flex center pt120">
					<button @click="authLogin('weixin')" :disabled="isLoading" class="weixin-login-btn" :class="{'disabled': isLoading}">
						<view class="iconfont iconweixin icon"></view>
						<view class="text text-center ft16 ftw600 text-w">
							{{ isLoading ? '登录中...' : '微信快速登录' }}
						</view>
					</button>
				</view>
				
		</view>
		<view v-else class="plr60 login-box">
			
			<view class="box-shadow pd30 bg-w bdr16 mt50">
				<view class="pt10 flex alcenter">
					<view class="ft16 ftw500 text-info">手机号</view>
					<input class="ml40" v-model="phone" maxlength="11" type="number" placeholder-style="color:#cccccc;" placeholder="输入手机号码" />
				</view>
				<view class="line mt40 mb40"></view>
				<view class="pb10 flex space alcenter">
					<view class="flex alcenter">
						<view class="ft16 ftw500 text-info">验证码</view>
						<input class="ml40 yzm-code" v-model="code" placeholder-style="color:#cccccc;" placeholder="输入验证码" maxlength="6" type="number" />
					</view>
					<view @click="sendCode" class="text-theme ft16 ftw500" :class="{'text-disabled': smsCodeDisabled}">
						{{ smsCodeLoading ? '发送中...' : smsCodeText }}
					</view>
				</view>
			</view>
			<view class="mt40 flex alcenter">
				<checkbox class="scale8" checked="true" /> 
				<navigator url="/pages/member/agreement">
					<text class="ft14 text-notice">同意</text>
					<text class="ft14 text-theme">平台用户协议、隐私协议</text>
				</navigator>
			</view>
			<button @click="loginYes" :disabled="loginDisabled" class="btn-main mt40 ft18 ftw600 text-w" :class="{'btn-disabled': loginDisabled}">
				{{ isLoading ? '登录中...' : '登录' }}
			</button>
		</view>
		
		<view class="pt120 flex center">
			<view @click="cancel" class="weixin-btn-cancel flex center alcenter ft16 text-info"> 
				<text class="iconfont iconfanhui mr10"></text><text>返回</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,  
		mapActions,
		mapGetters
	} from 'vuex'; 
	export default{
		props:{
			show:{
				type:Boolean,
				default:false
			}
		},
		data(){
			return {
				isWeixin: this.$config.dev == 'weixin' ?  true : false,
				phone: '',
				code: '',
				countdown: 0,
				isLoading: false,
				smsCodeLoading: false
			}
		},
		computed: {
			...mapGetters('user', ['isLoggedIn', 'userInfo']),
			
			// 验证码按钮文本
			smsCodeText() {
				if (this.countdown > 0) {
					return `${this.countdown}s后重新获取`;
				}
				return '获取验证码';
			},
			
			// 验证码按钮是否可用
			smsCodeDisabled() {
				return !this.phone || this.phone.length !== 11 || this.countdown > 0;
			},
			
			// 登录按钮是否可用
			loginDisabled() {
				return !this.phone || !this.code || this.isLoading;
			}
		},
		methods:{
			...mapActions('user', ['phoneLogin', 'sendSmsCode', 'wechatLogin']),
			
			// 发送验证码
			async sendCode() {
				if (this.smsCodeDisabled) return;
				
				// 手机号验证
				if (!/^1[3-9]\d{9}$/.test(this.phone)) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					});
					return;
				}
				
				this.smsCodeLoading = true;
				try {
					// 模拟发送验证码
					const result = await this.sendSmsCode();
					
					if (result.success) {
						uni.showToast({
							title: '验证码已发送',
							icon: 'success'
						});
						
						// 开始倒计时
						this.startCountdown();
					} else {
						uni.showToast({
							title: result.error || '发送失败',
							icon: 'none'
						});
					}
				} catch (error) {
					uni.showToast({
						title: '发送失败，请重试',
						icon: 'none'
					});
				} finally {
					this.smsCodeLoading = false;
				}
			},
			
			// 开始倒计时
			startCountdown() {
				this.countdown = 60;
				const timer = setInterval(() => {
					this.countdown--;
					if (this.countdown <= 0) {
						clearInterval(timer);
					}
				}, 1000);
			},
			
			// 登录
			async loginYes() {
				if (this.loginDisabled) return;
				
				// 验证码验证
				if (!/^\d{6}$/.test(this.code)) {
					uni.showToast({
						title: '请输入6位验证码',
						icon: 'none'
					});
					return;
				}
				
				this.isLoading = true;
				try {
					// 模拟用户信息
					const data = {
						phone: this.phone,
						code: this.code
					};
					
					// 模拟登录成功
					const result = await this.phoneLogin(data);
					
					if (result.success) {
						uni.showToast({
							title: '登录成功',
							icon: 'success'
						});
						
						// 通知父组件登录成功
						this.$emit('yes', result.data);
						
						// 清空表单
						this.phone = '';
						this.code = '';
					} else {
						uni.showToast({
							title: result.error || '登录失败',
							icon: 'none'
						});
					}
				} catch (error) {
					uni.showToast({
						title: '登录失败，请重试',
						icon: 'none'
					});
				} finally {
					this.isLoading = false;
				}
			},
			
			// 微信登录
			async authLogin(type) {
				this.isLoading = true;
				try {
					const result = await this.wechatLogin();
					
					if (result.success) {
						uni.showToast({
							title: '登录成功',
							icon: 'success'
						});
						
						this.$emit('yes', result.data);
					} else {
						uni.showToast({
							title: result.error || '登录失败',
							icon: 'none'
						});
					}
				} catch (error) {
					uni.showToast({
						title: '登录失败，请重试',
						icon: 'none'
					});
				} finally {
					this.isLoading = false;
				}
			},
			
			cancel(){
				this.$emit('cancel');
			}
		}
	}
</script>

<style>
	/*登录的层级是300*/
	.unio2o-login{
		position: fixed;
		height: 100vh;
		width: 100%;
		left: 0;
		top: 0;
		z-index: 300;
	}
	.login-header{
		padding-top: 160rpx;
	}
	.login-face{
		width: 152rpx;
		height: 152rpx;
		border-radius: 76rpx;
		border:2rpx solid #FFFFFF;
		box-shadow:0rpx 4rpx 16rpx 0rpx rgba(0,0,0,0.06);
	}
	.weixin-login-btn{
		width:630rpx;
		height:96rpx;
		background:rgba(68,181,73,1);
		border-radius:48rpx;
		position: relative;
	}
	.weixin-login-btn .icon{
		position: absolute;
		left: 60rpx;
		font-size: 48rpx;
		opacity: .4;
		line-height: 48rpx;
		top: 24rpx;
	}
	.weixin-login-btn .text{
		line-height: 96rpx;
	}
	.weixin-btn-cancel{
		width:230rpx;
		height:80rpx;
		border-radius:48rpx;
		border:2rpx solid #CCCCCC;
	}
	.login-box input{
		color:#666666;
	}
	.yzm-code{
		width: 200rpx;
	}
	
	/* 按钮禁用状态 */
	.disabled {
		opacity: 0.6;
		pointer-events: none;
	}
	
	.btn-disabled {
		background-color: #cccccc !important;
		border-color: #cccccc !important;
		color: #999999 !important;
		opacity: 0.6;
		pointer-events: none;
	}
	
	.text-disabled {
		color: #cccccc !important;
		pointer-events: none;
	}
	
	/* 点击效果 */
	.weixin-login-btn:active,
	.weixin-btn-cancel:active {
		transform: scale(0.98);
		opacity: 0.8;
	}
	
	.text-theme:active {
		opacity: 0.7;
	}
	
</style>